<template>
  <div>
    <van-icon name="arrow-left" @click="gohome()"/>
    <ul class="tab">
      <li @click="gonodone()">未完成</li>
      <li style="border-bottom:2px solid red;">已完成</li>
    </ul>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <li class="header" style>
        <span>任务名称</span>
        <span>巡视时间</span>
        <span>状态</span>
      </li>
      <ul v-for="item in list" :key="item.id">
        <li @click="select(item)" class="header">
          <span style="width:25%;text-align:center;">{{item.task_name}}</span>
          <span style="width:44%">{{item.start_time}}</span>
          <span style="width:20%">{{item.state}}</span>
        </li>
      </ul>
    </van-list>
  </div>
</template>
<script>
import axios from "axios";
import { getCookie } from "Utils/cookie";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pagelimit: 1,
      active: 2
    };
  },
  methods: {
    gohome() {
      this.$router.push("/select");
    },
    gonodone() {
      this.$router.push("/Inspection");
    },
    // 上拉加载
    onLoad() {
      axios({
        url: "/hrkc/Task/getTaskList",
        method: "POST",
        params: {
          pagesize: 10,
          pagelimit: this.pagelimit,
          state: "已完成",
          org_no: getCookie("org_no")
        }
      })
        .then(res => {
          console.log("res1111", res);
          if (res.data.code == 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              var item = {};
              item.task_name = res.data.data[i].task_name;
              item.start_time = res.data.data[i].start_time;
              item.state = res.data.data[i].state;
              item.task_id = res.data.data[i].id;
              this.list.push(item);
            }
            this.pagelimit = this.pagelimit + 1;
          } else {
            this.finished = true;
          }
          this.loading = false;
        })
        .catch(error => Promise.reject(error));
    },

    select(item) {
      console.log("item", item);
      this.$router.push({
        path: "/done_detail",
        query: {
          data: JSON.stringify(item)
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.tab {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 2px solid #ccc;
  li {
    font-size: 20px;
  }
}
.header {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.van-icon {
  position: relative;
  top: 20px;
  left: 0px;
}
</style>
